import type { Dispatch, SetStateAction } from 'react'
import { createContext, useContext } from 'react'
export const cardList = [
  {
    key: 'capture-screen',
    text: '截屏',
    icon: `<svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="35"
          height="35"
        >
          <path
            d="M835.3 250.9v522.3H188.7V250.9h646.6m49.8-49.8H138.9v621.8H885V201.1h0.1z"
            fill="#707070"
          ></path>
          <path
            d="M138.9 101.6v99.5H64.3v49.8H188.7V101.6zM885.1 922.4v-99.5h74.6v-49.8H835.3v149.3zM511 705.4H297.5c-7.8 0-20.4-2.9-23.3-7.8-2.9-4.9 1.9-16.5 5.8-23.3 26.2-39.8 53.4-79.6 79.6-119.4 8.7-12.6 17.5-13.6 31.1-7.8 44.6 21.4 90.3 42.7 135.9 64.1 12.6 5.8 28.1 1.9 35.9-9.7 24.3-37.9 49.5-74.7 75.7-111.6 4.9-6.8 13.6-17.5 20.4-17.5 7.8 0 13.6 12.6 16.5 20.4 24.3 60.2 47.6 121.3 70.9 181.5 9.7 25.2 5.8 31.1-23.3 31.1H511z m-78.6-298c0 29.1-25.2 52.4-54.4 51.4-29.1-1-51.4-23.3-51.4-51.4 0-29.1 24.3-52.4 54.4-51.4 27.1 0.9 51.4 24.2 51.4 51.4z"
            fill="#707070"
          ></path>
        </svg>`,
    noSetting: true
  },
  {
    key: 'recording',
    text: '录屏',
    icon: `<svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="35"
          height="35"
        >
          <path
            d="M704 213.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v126.976l124.074667-77.482667 4.522667-2.346667a53.333333 53.333333 0 0 1 73.813333 43.776l0.256 5.333334v362.837333a53.333333 53.333333 0 0 1-69.077333 50.944l-4.992-1.834667-4.565334-2.346666L725.333333 662.741333V789.333333a21.333333 21.333333 0 0 1-21.333333 21.333334h-554.666667a21.333333 21.333333 0 0 1-21.333333-21.333334v-554.666666a21.333333 21.333333 0 0 1 21.333333-21.333334h554.666667z m-42.666667 64h-469.333333v469.333334h469.333333v-469.333334z m202.666667 73.088L725.333333 437.077333v150.101334l138.666667 86.954666V350.421333zM426.666667 426.666667a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666z m0 64a21.333333 21.333333 0 1 0 0 42.666666 21.333333 21.333333 0 0 0 0-42.666666z"
            fill="#707070"
          ></path>
        </svg>`
  },
  {
    key: 'video',
    text: '录像',
    icon: `        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="35"
          height="35"
        >
          <path
            d="M733.090909 835.490909c-9.309091 0-16.290909-6.981818-16.290909-16.290909v-20.945455c0-9.309091 6.981818-16.290909 16.290909-16.290909h169.890909c9.309091 0 16.290909 6.981818 16.290909 16.290909v20.945455c0 9.309091-6.981818 16.290909-16.290909 16.290909h-169.890909z m-588.8 0c-9.309091 0-16.290909-6.981818-16.290909-16.290909v-20.945455c0-9.309091 6.981818-16.290909 16.290909-16.290909h169.890909c9.309091 0 16.290909 6.981818 16.290909 16.290909v20.945455c0 9.309091-6.981818 16.290909-16.290909 16.290909H144.290909z m-53.527273-86.109091c-27.927273 0-51.2-11.636364-67.490909-30.254545-13.963636-18.618182-23.272727-44.218182-23.272727-72.145455V356.072727c0-27.927273 9.309091-53.527273 23.272727-72.145454 16.290909-20.945455 39.563636-30.254545 67.490909-30.254546h330.472728c51.2-41.890909 111.709091-62.836364 174.545454-62.836363s123.345455 20.945455 174.545455 62.836363h162.909091c23.272727 0 44.218182 9.309091 60.509091 23.272728 18.618182 18.618182 27.927273 46.545455 27.927272 79.127272v293.236364c0 27.927273-6.981818 53.527273-23.272727 72.145454-16.290909 20.945455-39.563636 30.254545-67.490909 30.254546H90.763636z m842.472728-53.527273c18.618182 0 34.909091-16.290909 34.909091-34.90909V342.109091c0-18.618182-16.290909-34.909091-34.909091-34.909091h-111.709091c34.909091 48.872727 53.527273 104.727273 53.527272 162.909091 0 48.872727-11.636364 95.418182-37.236363 137.309091-18.618182 34.909091-46.545455 65.163636-79.127273 88.436363h174.545455zM90.763636 307.2c-18.618182 0-34.909091 16.290909-34.909091 34.909091v321.163636c0 18.618182 16.290909 32.581818 34.909091 34.909091h342.109091c-32.581818-23.272727-58.181818-53.527273-79.127272-88.436363-23.272727-41.890909-37.236364-90.763636-37.236364-137.309091 0-58.181818 18.618182-114.036364 53.527273-162.909091h-279.272728z m505.018182-62.836364c-123.345455 0-225.745455 100.072727-225.745454 225.745455s100.072727 225.745455 225.745454 225.745454c123.345455 0 225.745455-100.072727 225.745455-225.745454 0-123.345455-100.072727-225.745455-225.745455-225.745455z m0 400.290909c-95.418182 0-174.545455-79.127273-174.545454-174.545454s79.127273-174.545455 174.545454-174.545455 174.545455 79.127273 174.545455 174.545455-76.8 174.545455-174.545455 174.545454z m0-295.563636c-65.163636 0-118.690909 53.527273-118.690909 118.690909s53.527273 118.690909 118.690909 118.690909 118.690909-53.527273 118.690909-118.690909-51.2-118.690909-118.690909-118.690909zM132.654545 498.036364c-13.963636 0-25.6-11.636364-25.6-27.927273-2.327273-16.290909 9.309091-27.927273 25.6-27.927273h107.054546c13.963636 0 25.6 11.636364 25.6 27.927273 0 6.981818-2.327273 13.963636-6.981818 18.618182-4.654545 4.654545-11.636364 9.309091-18.618182 9.309091H132.654545z m0-83.781819c-16.290909 0-27.927273-11.636364-27.927272-27.927272s11.636364-27.927273 27.927272-27.927273H279.272727c16.290909 0 27.927273 11.636364 27.927273 27.927273s-11.636364 27.927273-27.927273 27.927272H132.654545z"
            fill="#707070"
          ></path>
        </svg>`
  },
  {
    key: 'audio',
    text: '录音',
    icon: `        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="35"
          height="35"
        >
          <path
            d="M515.04 667.27c-51.26 0-99.56-20.08-136.01-56.53-36.45-36.45-56.53-84.76-56.53-136.01V259.18c0-51.26 20.08-99.56 56.53-136.01 36.45-36.45 84.76-56.53 136.01-56.53h0.19c106.06 0 192.35 86.37 192.35 192.54v215.55c0 51.26-20.08 99.56-56.53 136.01-36.45 36.46-84.76 56.53-136.01 56.53z m0-531.17c-67.87 0-123.09 55.22-123.09 123.09v215.55c0 67.87 55.22 123.09 123.09 123.09s123.09-55.22 123.09-123.09V259.18c0-67.87-55.13-123.09-122.9-123.09h-0.19z"
            fill="#707070"
          ></path>
          <path
            d="M515.04 782.75c-44.19 0-87.16-8.73-127.7-25.96-39.09-16.61-74.22-40.34-104.43-70.55-30.21-30.21-53.95-65.35-70.55-104.43-17.22-40.54-25.96-83.51-25.96-127.7 0-19.18 15.55-34.73 34.73-34.73s34.73 15.55 34.73 34.73c0 142.92 116.27 259.19 259.19 259.19 142.92 0 259.19-116.27 259.19-259.19 0-19.18 15.55-34.73 34.73-34.73s34.73 15.55 34.73 34.73c0 44.19-8.73 87.16-25.96 127.7-16.61 39.09-40.34 74.22-70.55 104.43-30.21 30.21-65.35 53.95-104.43 70.55-40.56 17.23-83.53 25.96-127.72 25.96z"
            fill="#707070"
          ></path>
          <path
            d="M515.04 955.49c-19.18 0-34.73-15.55-34.73-34.73V748.03c0-19.18 15.55-34.73 34.73-34.73 19.18 0 34.73 15.55 34.73 34.73v172.74c0 19.17-15.55 34.72-34.73 34.72z"
            fill="#707070"
          ></path>
          <path
            d="M445.86 441.23c-19.18 0-34.73-15.55-34.73-34.73V269.02c0-19.18 15.55-34.73 34.73-34.73s34.73 15.55 34.73 34.73v137.49c-0.01 19.18-15.55 34.72-34.73 34.72z"
            fill="#707070"
          ></path>
        </svg>`
  },
  {
    key: 'viewFile',
    text: '查看文件',
    icon: `        <svg
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="35"
          height="35"
        >
          <path
            d="M745.19 98.15H281.32c-100.97 0-183.11 82.14-183.11 183.11v329.59c0 100.97 82.14 183.11 183.11 183.11h463.87c100.97 0 183.11-82.14 183.11-183.11V281.26c-0.01-100.97-82.14-183.11-183.11-183.11z m109.86 512.7c0 60.58-49.28 109.86-109.86 109.86H281.32c-60.58 0-109.86-49.28-109.86-109.86V281.26c0-60.58 49.28-109.86 109.86-109.86h463.87c60.58 0 109.86 49.28 109.86 109.86v329.59zM745.19 854.99H281.32c-20.23 0-36.62 16.4-36.62 36.62s16.4 36.62 36.62 36.62h463.87c20.23 0 36.62-16.4 36.62-36.62s-16.4-36.62-36.62-36.62z"
            fill="#707070"
          ></path>
          <path
            d="M618.85 374.47l-89.97-51.94c-29-16.75-63.67-16.76-92.7-0.01s-46.35 46.77-46.35 80.28v103.88c0 33.51 17.33 63.53 46.36 80.29 14.51 8.37 30.42 12.56 46.34 12.56s31.84-4.2 46.35-12.59l89.97-51.93c29.02-16.76 46.35-46.78 46.35-80.29 0-33.5-17.33-63.5-46.35-80.25z m-36.62 97.1l-89.98 51.94c-8.76 5.05-16.52 1.7-19.44 0.01-2.92-1.69-9.73-6.71-9.73-16.86V402.79c0-10.13 6.81-15.15 9.73-16.84 1.78-1.03 5.33-2.67 9.82-2.67 2.9 0 6.19 0.68 9.63 2.67l89.97 51.94v0.01c8.77 5.05 9.73 13.46 9.73 16.83s-0.96 11.78-9.73 16.84z"
            fill="#707070"
          ></path>
        </svg>`,
    noSetting: true
  }
]

export enum cardEnum {
  'capture-screen' = 'capture-screen',
  'recording' = 'recording',
  'video' = 'video',
  'audio' = 'audio',
  'viewFile' = 'viewFile'
}

export function getInitStream(
  source: { id: string },
  audio?: any
): Promise<MediaStream | undefined> {
  return new Promise((resolve) => {
    // 获取指定窗口的媒体流
    // 此处遵循的是webRTC的接口类型  暂时TS类型没有支持  只能断言成any
    ; (navigator.mediaDevices as any)
      .getUserMedia({
        audio: audio || false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: source.id,
            minWidth: 1920,
            maxWidth: 1920,
            minHeight: 1080,
            maxHeight: 1080,
            minFrameRate: 30,
            maxFrameRate: 60,
            // 优先尝试 VP9
            videoCodec: 'vp09.00.10.08' // VP9 Profile 0
          }
        }
      })
      .then((stream: MediaStream) => {
        resolve(stream)
      })
      .catch((error) => {
        console.log(error)
        resolve(undefined)
      })
  })
}

export const Context = createContext<
  | {
    states: {
      windowScreenSource: any // 窗口截图源
    }
    setStates: Dispatch<
      SetStateAction<{
        windowScreenSource: any // 窗口截图源
      }>
    >
  }
  | undefined
>(undefined)

export const useStatesContext = () => {
  const context = useContext(Context)
  if (!context) {
    throw new Error('useStatesContext must be used within an useStatesContext')
  }
  return context
}
